<template>
	<view class="main">
		<uv-sticky bgColor="#fff" ref="backTop" top="300">
			<view class="sv">
				<uv-search v-model="searchValue" @search="fillterSearch" @change='fillterSearch' placeholder="搜索科室名"
					:animation="true"></uv-search>
			</view>
		</uv-sticky>

		<view class="lv">
			<view class="lvi" v-for="(i,o) in mainListF" key="o" @click="openChooseDoctor(i,o)">{{i.name}}</view>
		</view>

		<uv-back-top :scroll-top="scrollTop" icon="arrow-up" :customStyle="customStyle"
			:iconStyle="iconStyle"></uv-back-top>
	</view>
</template>

<script>
	export default {
		// name: '预约挂号',
		data() {
			return {
				customStyle: {
					backgroundColor: '#2c9b94',
				},
				iconStyle: {
					fontSize: '24rpx',
					color: '#fff',
				},
				scrollTop: 0,
				searchValue: '',
				mainList: [],
				mainListF: [],
			}
		},
		mounted() {
			this.mainList = [{
				name: '康复医学科',
				id: 1,
			}, {
				name: '中西医结合',
				id: 1,
			}, {
				name: '中老年科',
				id: 1,
			}, {
				name: '产科',
				id: 1,
			}, {
				name: '儿科',
				id: 1,
			}, {
				name: '胸外科',
				id: 1,
			}, {
				name: '神经外科',
				id: 1,
			}, {
				name: '神经内科',
				id: 1,
			}, {
				name: '脑科',
				id: 1,
			}, {
				name: '肾内科',
				id: 1,
			}, {
				name: '心脏内科',
				id: 1,
			}, {
				name: '耳鼻喉科',
				id: 1,
			}, ]
			this.mainListF = [...this.mainList]
		},
		methods: {
			openChooseDoctor(item, index) {
				uni.navigateTo({
					url: `/pages/Doctor/Scheduling/chooseDoctor?info=${JSON.stringify(this.mainListF[index])}`
				})
			},
			fillterSearch() {
				if (this.searchValue) {
					this.mainListF = this.mainList.filter(i => i.name.indexOf(this.searchValue) > -1)
				} else {
					this.mainListF = [...this.mainList]
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #f5f5f5;
		min-height: 100vh;

		.sv {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 20rpx;
		}

		.lv {
			.lvi {
				background-color: #fff;
				height: 70rpx;
				margin-bottom: 5rpx;
				line-height: 70rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
			}
		}
	}
</style>